Нестандартные кнопки социальных сетей для сайта – таких не встретишь ни где
Добрый день дорогие друзья! Сегодня у меня небольшой пост, в котором я хочу рассказать вам о пока ещё не запятнанных кнопках социальных сетей для сайта. На эту тему в сети написано уже тоны контента и я не хочу быть ещё одним рерайтером, потому что все эти статьи рассказывают об одних и тех же сервисах яндекса. Поэтому мы сейчас и видим, что на всех блогах стоят одинаковые кнопки и из-за этой пустяковины блоги теряют свою уникальность перед читателями. Когда я вижу любую мелочь будь эта форма подписки, соц. кнопки или шаблон, то ценность блога сразу падаем в моих глазах. И в ваших я думаю тоже.
Блогосфера растет и если сейчас делать блог с нуля, то статьями на тему с обзорами классических плагинов, сервисов, установкой denwera, регистрацией в хостинге – никого не удивишь, а если вы и собрались писать статью на популярную тему, то информация должна быть исключительно эксклюзивная, но молодому блоггеру навряд ли это под силу.
Я сам стараюсь не быть похожим на других и время от времени меняю элементы дизайна, последний раз сменил форму подписки и соц. кнопки пол года назад. Все очень элегантно вписалось в дизайн так, что хочется строчить и строчить на такой блог=) Ещё пол года назад появился новый сервис кнопок социальных сетей, он какой-то буржуйный кстати и я быстренько себе их установил. Честно сказать я предполагал, что в течение полугода такие кнопки будут стоять уже на всех блога, но время идет и подобные элементы я вижу лишь у единиц, более того очень мало статей имеется с обзором этого сервиса, поэтому пришло время вам о нем рассказать.
Вот вам ссылка на сервис. Выбор кнопок прост как три копейки.
Сперва нужно определиться со скином:
- Классический
- Плоский
- Бирман
Какие вам нужны социальные сети укажите сами, что касается скина, то я лично использую классическую оболочку с четырьмя наиболее значимыми соц. сетями. Сейчас в интернете можно встретить много статей на тему того, что кнопки социальных сетей для сайта несут вред, но я лично не вижу в них ничего плохого и свои 50-100 посетителей в сутки я получаю именно с соц.сетей. Факт, то что для контентных проектов такие кнопки бесполезны, потому что мало кто хочет ретвитить или репостить безличные статейные сайты, а контентом с блогов люди с радостью делятся со своими друзьями. Вот как выглядят все три оболочки кнопок на сервисе:
Я лично мало где встречал такие кнопки, поэтому можете смело устанавливать их себе на блог. Кстати, что касается установки, то я забыл вам о ней рассказать=)
Как только вы настроили подходящий вид кнопок внизу страницы жмите желтую кнопку «скачать». Вот как она выглядит:
Это будет архив содержащий в себе несколько файлов:
- CSS стиль
- Небольшой скрипт .js
- Html код
Пока писал статью, понял, почему у многих нет таких кнопок, а все потому, что инструкция по установке на английском языке, поэтому чтоб вы не парились, я написал небольшой мануал по установке соц. кнопок.
Шаг 1. – Файлы стилей и скриптом забрасываем в папку с вашей темой wordpress.
- social-likes_classic.css
- social-likes.min.js
Шаг 2. – Открываем файл header.php и между тегом <head></head> вставляем следующий код:
1 2 <meta name="generator" content="Social Likes: http://sapegin.github.com/social-likes/">
<link rel="stylesheet" href="social-likes_classic.css">
<meta name="generator" content="Social Likes: http://sapegin.github.com/social-likes/">
<link rel="stylesheet" href="social-likes_classic.css">
Говоря простым языком мы подключили CSS стиль и графику кнопок, которая будет грузиться с сервера github.com, тем самым уменьшили количество запросов к базе данных.
Далее выбираем место где вы хотите установить кнопки и вставляете следующий код: 1 2 3 4 5 6 7 8 9 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="social-likes.min.js"></script>
<div>
<div title="Поделиться ссылкой на Фейсбуке">Facebook</div>
<div data-via="antonkramorov" title="Поделиться ссылкой в Твиттере">Twitter</div>
<div title="Поделиться ссылкой во Вконтакте">Вконтакте</div>
<div title="Поделиться ссылкой в Гугл-плюсе">Google+</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="social-likes.min.js"></script>
<div>
<div title="Поделиться ссылкой на Фейсбуке">Facebook</div>
<div data-via="antonkramorov" title="Поделиться ссылкой в Твиттере">Twitter</div>
<div title="Поделиться ссылкой во Вконтакте">Вконтакте</div>
<div title="Поделиться ссылкой в Гугл-плюсе">Google+</div>
</div>
Затем сохраняете и обновляете страницу. Кнопки должны отобразиться. На этом у меня все, если у вас есть какие-нибудь вопросы по установке кнопок прошу писать в комментариях. Помогу установить кнопки корректно. Подписывайтесь на обновления блога, жду вас в следующих статьях.
jonyit.ru
Социальные кнопки на HTML / CSS3
Социальные кнопки на HTML / CSS
Это довольно часто встречающий атрибут на каждом сайт, сейчас не возможно представить хоть один сайт без социальных кнопок. В данном уроке создадим красивые кнопки на CSS, зафиксируем их на странице, а при наведении, будем анимированть плавным появлением с количеством просмотров. По нажатию на иконку пользователь будет переходить на социальную сеть.
See the Pen EbdgoN by Denis (@Dwstroy) on CodePen.
Разметка социальной панели в HTML
Первым делом создадим каркас социальной панели. Чтобы не писать html разметку с нуля я его скопировал с предыдущего урока «Как создать форму в CSS3», в уроке я показывал, как подключать иконки на страничке и красиво оформить.
Скачайте архив с урока на компьютер и разархивируйте. В папке найдете стили и шрифты иконок, которые подключали в предыдущем видео с данного ресурса
fontawesome.io.
В папке img расположена картинка на задний фон, в css папке файл style.css в которой подключили картинку, font-awesome.css содержит стили иконок, в папке fonts их шрифты, а в index.html это все подключено, остается только описать саму разметку.
Я переносу все файлы в IDE редактор PhpStorm в котором буду описывать код, а вы можете их редактировать прям через блокнот.
Открываем файл index.html, в head описано подключение стилей и иконок, тут я думаю все предельно понятно. Между тегами body открываем <div> с классом социал .social, который будет являться нашей оберткой кнопок.
В нутрии создадим, блок <div> с классом .dws-button, второй класс пропишем начальный суффикс dws-, этот блок продублируем шесть раз, в нем разместим ссылку с атрибутом target=_blank чтобы она открывалась в новой вкладке, затем в ней идет блок div с классом dws-share, в нем делаем список для иконки с классом .fa и приставкой второго класса fa- с атрибутом aria-hidden=true за ним добавляем блок с классом .dws-text, жмем создать (кнопка TAB) получили html каркас под иконки, которые далее оформим при помощи стилей.
div.dws-button.dws-*6>a[target=_blank]>div.dws-share>i.fa.fa-[aria-hidden=true]^div.dws-text
Затем отберем иконки, которые задействуем под социальную панель. Переходим на сайт
fontawesome.io/icons и выписываем название иконок, которые будем использовать.
-
facebook
-
vk
-
twitter
-
youtube
-
odnoklassniki
-
envelope-o
Вставляем ссылки и прописываем количество подписчиков.
<div>
<div><a href="https://www.facebook.com/DWstroy-1415456785391372/" target="_blank">
<div><i aria-hidden="true"></i></div>
<div>51</div>
</a></div>
<div><a href="https://vk.com/dwstroy" target="_blank">
<div><i aria-hidden="true"></i></div>
<div>730</div>
</a></div>
<div><a href="#">
<div><i aria-hidden="true"></i></div>
<div></div>
</a></div>
<div><a href="https://www.youtube.com/channel/UCTgx8cZRD5Jz2_zGaT27S3w" target="_blank">
<div><i aria-hidden="true"></i></div>
<div>1299</div>
</a></div>
<div><a href="#">
<div><i aria-hidden="true"></i></div>
<div></div>
</a></div>
<div><a href="mailto:[email protected]">
<div><i aria-hidden="true"></i></div>
<div></div>
</a></div>
</div>
Затем приступим к оформлению стилей.
Открываем style.css, от позиционируем блок .social.
.social{
position: fixed;
top: 200px;
left: 0;
z-index: 1000;
}
Затем предадим кнопке внешний вид, указываем высоту и ширину, сделаем небольшие отступы. Зададим уменьшение ширины блока кнопки до 40 пик и скроем все, что вылезает за ее пределы при помощи overflow:hidden;. Придаем кнопке анимацию при помощи transition: all 0.5s; и прижимаем ее к левому краю меняя параметр у класса .social left=0.
.dws-button{
background-color: #3b5998;
width: 40px;
height: 25px;
padding: 5px;
overflow:hidden;
transition: all 0.5s;
}
Пропишем иконкам, и тексту которые обернутые в ссылки белый цвет, убираем подчеркивание.
a{
color: #fff;
text-decoration:none;
}
Увеличим иконки на 25 пик. и от центруем их по середине. Чтобы они встали по центру, напишем что это блочный элемент.
a i.fa {
font-size: 25px;
text-align: center;
display: block;
}
Сделаем обтекание у иконок при помощи float:left и укажем ширину в 40 пик.
.dws-share{
float: left;
width: 40px;
}
Текст прижмем к правой стороне, увеличим его на 20 пик. и отпозиционируем его по центру строки.
.dws-text{
float: right;
font-size: 20px;
position: relative;
top: 2px;
right: 5px;
}
Затем предлагаю каждой кнопки задать соответствующий цвет.
.dws-facebook {background-color: #3b5998;}
.dws-vk {background-color: #507299;}
.dws-twitter {background-color: #33bdf1;}
.dws-youtube {background-color: #e62117;}
.dws-odnoklassniki {background-color: #ee8208;}
.dws-envelope-o {background-color: #656766;}
Пропишем параметры при наведении. Первое будем менять цвет кнопки на черный, увеличим ее ширину до 50 пик., а саму иконку немного сдвинем левей на 15 пик.
.dws-button:hover{
background-color: #000;
width: 50px;
padding-left: 15px;
}
Получилось следующее. Добавим при наведении для блоков с текстом ширину.
.dws-facebook:hover{width:75px;}
.dws-vk:hover,.dws-youtube:hover{width:95px;}
Вот такие анимированные иконки получились у нас с вами. Вы можете на базе данного кода вставлять свои иконки, добавлять ссылки к ним, внедрять все это к себе на сайт. Ведь функционал до безобразия простой и довольно эффектно смотрится.
Кому понравилось видео, обязательно поделись им в социальных сетях.
Оставить комментарий:
dwstroy.ru
html - При использовании float: left один из боков сползает вниз
body
{
background:url(http://www.pixeden.com/media/k2/galleries/165/002-subtle-light-pattern-background-texture-vol5.jpg) repeat;
}
.wrap
{
background: #333;
width: 1000px;
margin: auto;
}
.clear
{
clear: both;
}
header
{
background: #000;
}
.logo
{
margin-left: 19px;
margin-top: 30px;
margin-bottom: 19px;
width: 366px;
height: 59px;
float: left;
}
.some_text_in_header
{
width: 404px;
height: 40px;
margin-right: 19px;
margin-top: 39px;
margin-bottom: 29px;
color: #595959;
text-align: right;
float: right;
font-family: Georgia;
font-size: 17px;
font-weight: 400;
line-height: 22px;
}
.top_menu
{
background-color: #282828;
width: 960px;
height: 46px;
margin: auto;
text-align: center;
border-radius: 10px 10px 0 0;
}
.top_menu ul li
{
display: inline-block;
margin-top: 19px;
margin-right: 31px;
}
.top_menu ul li a
{
color: #ccc;
font-family: Georgia;
text-decoration: none;
text-transform: uppercase;
}
.top_menu ul li a:hover
{
color: yellow;
}
main
{
background-color: #282828;
border-top: 1px solid #3d3d3d;
border-bottom: 1px solid #3d3d3d;
}
.some_content
{
float: left;
width: 680px;
height: 358px;
background-color: #171717;
margin: 26px 0px 0px 20px;
}
.some_content_block
{
display: block;
float: left;
width: 280px;
height: 113px;
margin: 31px 27px 39px 31px;
}
.some_content_block img, h4, p
{
display: inline-block;
}
.some_content_block h4
{
color: #4a4a4a;
font-family: Georgia;
font-size: 22px;
font-weight: 400;
line-height: 26px;
}
.some_content_block p
{
color: #999;
font-family: Georgia;
font-size: 12px;
font-weight: 400;
line-height: 14px;
}
.first_some_img_block
{
float: left;
width: 680px;
height: 150px;
margin: 22px 0px 26px 20px;
line-height:0
}
.first_some_img_block img
{
border:solid 10px #171717;
display: block;
float: left;
margin-right: 10px;
}
.first_some_img_block img:last-child
{
margin-right: 0px;
}
.second_some_img_blok
{
background: #aaa;
margin-top: 26px;
float: right;
width: 260px;
height: 530px;
}
.second_some_img_blok_big_pic
{
display: block;
float: left;
}
.second_some_img_blok_small_pic
{
display: block;
float: left;
} <!DOCTYPE html>
<html>
<head>
<title>WEB TEAM template</title>
<link rel="stylesheet" href="./reset.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- wrap begin -->
<div>
<!-- HEADER THERE -->
<header>
<div>
<div>
<a href="#"><img src="http://cdn.shopify.com/s/files/1/0307/4837/t/2/assets/logo.png" alt="logo"></a>
</div>
<div>
<p>
Nullanibh quis sed in auctor sit aenean vivamus
hendrerit purus nequam. Pulvinarat ligula sed eger.
</p>
</div>
<div></div>
</div>
<nav>
<ul>
<li><a href="#">homepage</a></li>
<li><a href="#">style demo</a></li>
<li><a href="#">full width</a></li>
<li><a href="#">dropdown</a></li>
<li><a href="#">link text</a></li>
</ul>
</nav>
</header>
<!--MAIN CONTENT THERE -->
<main>
<div>
<div>
<img src="http://getnack.com/wp-content/themes/pursuit/assets/images/nackpaymentleft_righttoppic.png" alt="">
<h4>lorum ipsum dolor</h4>
<p>Orciinterdum condimenterdum nullamcorper
elit nam curabitur laoreet met praesenean et iac
ulum. Metridiculis conseque quis iaculum aen
ean nunc aenean quis nam nis dui.</p>
</div>
<div>
<img src="http://getnack.com/wp-content/themes/pursuit/assets/images/nackpaymentleft_righttoppic.png" alt="">
<h4>lorum ipsum dolor</h4>
<p>Orciinterdum condimenterdum nullamcorper
elit nam curabitur laoreet met praesenean et iac
ulum. Metridiculis conseque quis iaculum aen
ean nunc aenean quis nam nis dui.</p>
</div>
<div>
<img src="http://getnack.com/wp-content/themes/pursuit/assets/images/nackpaymentleft_righttoppic.png" alt="">
<h4>lorum ipsum dolor</h4>
<p>Orciinterdum condimenterdum nullamcorper
elit nam curabitur laoreet met praesenean et iac
ulum. Metridiculis conseque quis iaculum aen
ean nunc aenean quis nam nis dui.</p>
</div>
<div>
<img src="http://getnack.com/wp-content/themes/pursuit/assets/images/nackpaymentleft_righttoppic.png" alt="">
<h4>lorum ipsum dolor</h4>
<p>Orciinterdum condimenterdum nullamcorper
elit nam curabitur laoreet met praesenean et iac
ulum. Metridiculis conseque quis iaculum aen
ean nunc aenean quis nam nis dui.</p>
</div>
</div>
<div>
<img src="http://mmo-shop.ru/uploads/blocks/origin-accounts-200x130.png" alt="">
<img src="http://mmo-shop.ru/uploads/blocks/origin-accounts-200x130.png" alt="">
<img src="http://mmo-shop.ru/uploads/blocks/origin-accounts-200x130.png" alt="">
</div>
<div>
<img src="http://orig11.deviantart.net/1b04/f/2012/278/0/4/random_bg_by_pagodapeak-d5gwipc.png" alt="">
<img src="http://isandroid.ru/uploads/posts/2014-08/1406899988__jpg_converted.jpg" alt="">
<img src="http://isandroid.ru/uploads/posts/2014-08/1406899988__jpg_converted.jpg" alt="">
<img src="http://isandroid.ru/uploads/posts/2014-08/1406899988__jpg_converted.jpg" alt="">
<img src="http://isandroid.ru/uploads/posts/2014-08/1406899988__jpg_converted.jpg" alt="">
</div>
<div></div>
</main>
<!-- FOOTER THERE -->
<footer>
<div>
<a href="#"></a>
<a href="#">want go the top?</a>
</div>
<div>
<form action=""></form>
<label for="usr_name">Name:</label>
<input name="usr_name" type="text">
<label for="usr_email">Email:</label>
<input name="usr_email" type="text">
<label for="usr_message">Message:</label>
<textarea name="usr_massage" form="usr_feedback"></textarea>
<button type="button" name="usr_feedback_submit">Submit</button>
<button type="button" name="usr_feedback_reset">Reset</button>
</div>
<div>
<h5>Latest From The Blog</h5>
<hr>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</div>
<div>
<h5>Keep in touch</h5>
<hr>
<div>
<img src="https://dgryagaiw0chj.cloudfront.net/sites/all/themes/shared/jcore_oup/images/facebook.svg" alt="follow us on Facebook">
<a href="#">Facebook</a></div>
<div>
<img src="https://www.microsoft.com/en-xm/outlook-com/img/footer-icon-twitter.svg" alt="follow us on Twitter">
<a href="#">Twitter</a></div>
<div>
<img src="http://orig09.deviantart.net/316b/f/2013/190/d/7/deviantart_by_tanathe-d6co5mn.png" alt="see us on Deviant Art">
<a href="#">Deviant Art</a>
</div>
</div>
<hr>
<p>Copyright © 2013 Domain Name - All Rights Reserved</p>
<p>Template by OS Templates</p>
</footer>
</div>
<!-- end wrap -->
</body>
</html> ru.stackoverflow.com
Делаем страницу-заглушку при помощи HTML5 и CSS3
В этом уроке мы собираемся создать страницу-заглушку при помощи HTML5 и CSS3 в минималистском стиле и светлых тонах. В этом уроке мы будем также использовать некоторые новые теги HTML5 и некоторые интересные атрибуты, такие как «placeholder» и «required» для формы подписки. Атрибут «placeholder» позволяет нам показывать текст в поле ввода электронной почте, когда он пуст, в то время как атрибут «required» позволяет сделать, так чтобы пользователь не мог отправить форму без ввода данных. Мы также добавим JQuery-код этих двух атрибутов для старых браузеров и браузеров, которые пока их не поддерживают. Для таймера обратного отсчета мы будем использовать JQuery и jQuery countdown plugin от tutorialzine.com. Конечно, мы немного его настроим, чтобы соответствовать нашему дизайну.
Окончательный результат:
Смотреть демо
Как видите, страница содержит много градиентов и теней. Мы будем делать её, используя только CSS3. Как вы, наверняка знаете, CSS3 предоставляет нам много новых свойств, которые позволяют создавать интересные эффекты без необходимости использования изображений.
Так, хватит болтать и начнем.
1. Структура файла
Создайте папку и назовите “coming-soon-page”. Внутри этой папки будут следующие файлы и папки:
- index.html –основной HTML-документ;
- css— папка со стилями,
- style.css – основные стили,
- reset.css – файл для сброса стилей (meyerweb),
- ie.css – файл для Internet Explorer 7 и 8;
- js— папка с файлами JavaScript,
- jquery.countdown.js – плагин jQuery для обратного отсчета времени,
- script.js – наш JavaScript-файл для установки таймера, для анимации и некоторых атрибутов html5, которые не поддерживаются
- modernizr.custom.js – файл с шаблоном modernizr;
- images – папка для изображений;
- fonts – папка со шрифтами
2. Структура страницы
Ниже вы видите основную HTML-разметку страницы:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Minimal Coming Soon Page</title> <!-- CSS --> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="fonts/stylesheet.css"> <link rel="stylesheet" href="css/style.css"> <!--[if lt IE 9]> <link rel="stylesheet" href="css/ie.css"> <![endif]--> <!-- IE fix for HTML5 tags --> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!-- jQuery and Modernizr--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="js/modernizr.custom.js"></script> <!-- Countdown timer and other animations --> <script src="js/jquery.countdown.js"></script> <script src="js/script.js"></script> </head> <body> <header> <!-- The headline and description of our page --> </header> <div> <div> <!-- The main links, support, download, etc. --> </div> <div> <!-- The countdown timer --> </div> <form action="" method="get"> <!-- The subscription form --> </form> <div> <!-- The social media arrow, on the right of the page --> </div> <footer> <!-- The page's footer that will contain the social icons --> </footer> </div> </body> </html>
Как видите, код HTML очень прост. В теге «head» мы прикрепили все стили и JavaScript-файлы, которые нам нужны.
Также мы добавили условные комментарии для файла «ie.css». В этом файле мы добавим несколько строк для IE 7-8. Мы также прикрепили файл «html5.js» для того, чтобы заставить IE 7 и 8 понимать новые теги HTML5, “header” и “footer”.
Тело нашей страницы содержит хедер, в который мы поместим заголовок и описание страницы, и див «main», в который мы поместим ссылки, таймер обратного отсчета, форму подписки и футер.
Вот стили для тела страницы. Мы будем использовать в основном шрифт Arial (за исключением таймера) и повторяющийся паттерн для фона:
body { background: url(../images/body-pattern.jpg) top left repeat; font-family: Arial, Helvetica, sans-serif; padding-bottom: 40px; } 3. Хедер
Как было сказано выше, наш хедер будет содержать заголовок и описание. Вот разметка HTML:
<header> <h2>We are working our butts off to finish this website</h2> <p>Our developer, Michael, is doing his best to finish this website before the counter, but we can’t help him.</p> </header> А вот и стили:
/* ---- Header ---- */ header { width: 720px; margin: 80px auto 0 auto; } header h2 { font-size: 30px; font-weight: bold; color: #272727; text-shadow: 0 1px 0 #fff; } header p { margin: 20px 0 0 3px; font-size: 14px; color: #272727; } Теперь наша страница выглядит следующим образом:
4. Основная область
Основная область будет содержать ссылки, таймер, форму подписки, футер и социальные иконки.Вот ее стили:
/* ---- Main Area ---- */ #main { position: relative; width: 700px; margin: 50px auto 0 auto; padding: 20px 0 0 25px; background: url(../images/main-content-pattern.jpg) top left repeat; } Она имеет ширину 700 пикселей и повторяющийся рисунок с сеткой в качестве фона и у нее относительное позиционирование.
5. Ссылки
Ниже вы можете увидеть HTML-разметку для ссылок:
<div> <div><a href="">http://1stwebdesigner.com/</a></div> <div><a href="">http://support.1wd.com/</a></div> <div><a href="">Google Chrome OS. 10.X.23</a></div> <div><a href="">http://1wd.co/e-books/</a></div> <div><a href="">http://1wd.com/download/</a></div> <div><a href="">UPS Signed Worldwide</a></div> </div> И CSS:
/* ---- Links ---- */ #links { width: 700px; font-size: 12px; font-weight: bold; color: #aaa; line-height: 18px; overflow: hidden; } #links a { position: relative; color: #aaa; text-decoration: none; } #links a:hover { color: #aaa; text-decoration: none; } .home, .support, .browser, .books, .download, .ups { float: left; width: 180px; margin-left: 42px; padding-left: 25px; } .home { background: url(../images/home.png) left center no-repeat; margin-left: 0; } .support { background: url(../images/support.png) left center no-repeat; } .browser { background: url(../images/browser.png) left center no-repeat; clear: right; } .books, .download, .ups { margin-top: 10px; } .books { background: url(../images/books.png) left center no-repeat; margin-left: 0; } .download { background: url(../images/download.png) left center no-repeat; } .ups { background: url(../images/ups.png) left center no-repeat; clear: right; } Область ссылок имеет ширину 700 пикселей, а у каждой ссылки есть своя собственная иконка. Мы немного поиграли с отступами, чтобы сделать так, чтобы они соответствовали дизайну. А еще мы используем относительное позиционирование для ссылкок, чтобы позже можно было добавить простую анимацию к ним при помощи JQuery.
Страница должна выглядеть следующим образом:
6. Таймер обратного отсчета
Для создания таймера обратного отсчета мы будем использовать jQuery countdown plugin от tutorialzine.com. Наш таймер включает в себя див “counter”. Вот его HTML-код:
Див “counter” будет пустым, потому что весь HTML-код будет генерироваться плагином jQuery. Вот HTML-код, который генерирует плагин:
<div> <div> <span> <span>0</span> </span> <span> <span>0</span> </span> <span> <span>DAYS</span> </span> </div> <span>:</span> <span></span> <div> <span> <span>0</span> </span> <span> <span>0</span> </span> <span> <span>HRS</span> </span> </div> <span>:</span> <span></span> <div> <span> <span>0</span> </span> <span> <span>0</span> </span> <span> <span>MNTS</span> </span> </div> <span>:</span> <span></span> <div> <span> <span>0</span> </span> <span> <span>0</span> </span> <span> <span>SECS</span> </span> </div> </div> В зависимости от времени, которые мы ставим при инициализации счетчика, плагин будет показывать четыре колонки цифр («Дни», «часы», «минуты», «секунды») и анимировать таймер.
Примечание: Мы не будем объяснять плагин более подробно. Мартин Ангелов (Martin Angelov), создатель этого плагина очень подробно объясняет это на tutorialzine.
Теперь давайте добавим стили нашему счетчику:
/* ---- Counter ---- */ #counter { width: 700px; height: 145px; margin: 55px auto 0 auto; font-family: 'LeagueGothicRegular', Arial, Helvetica, sans-serif; font-size: 92px; color: #272727; text-shadow: 0 1px 0 #fff; overflow: hidden; } .countDays, .countHours, .countMinutes, .countSeconds { float: left; width: 102px; height: 138px; padding-left: 36px; background: #e7e7e7; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.1)), to(rgba(0,0,0,.07))); background-image: -webkit-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.07)); background-image: -moz-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.07)); background-image: -ms-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.07)); background-image: -o-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.07)); background-image: linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.07)); border: 1px solid #ccc; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 0 2px 3px 0 rgba(255,255,255,.2) inset, 0 2px 2px 0 rgba(0,0,0,.1); -webkit-box-shadow: 0 2px 3px 0 rgba(255,255,255,.2) inset, 0 2px 2px 0 rgba(0,0,0,.1); box-shadow: 0 2px 3px 0 rgba(255,255,255,.2) inset, 0 2px 2px 0 rgba(0,0,0,.1); } .points { float: left; width: 40px; margin: 0; font-family: Georgia, serif; font-size: 44px; font-weight: bold; text-align: center; line-height: 138px; text-shadow: none; } .position { position: relative; float: left; width: 35px; height: 92px; margin: 8px 0 0 0; } .digit { position: absolute; top: 0; left: 0; } .boxName { float: left; width: 80px; margin: -5px 0 0 7px; font-size: 36px; color: #a6a6a6; text-shadow: 0 1px 0 rgba(255,255,255,.5); } .Hours { margin-left: 5px; } .Seconds { margin-left: 2px; } Мы выбрали шрифт «League Gothic" .
Как видите, мы использовали только CSS3-свойства для создания теней и градиентов. Эти новые свойства позволяет создавать сложные проекты без необходимости нарезки изображений.
CSS3 свойства, которые используемые здесь: «border-radius”, “box-shadow”, “linear-gradient” и “text-shadow”.
Мы также использовали атрибут „RGBA“ , потому что он позволяет присвоить прозрачного цвета с различными свойствами CSS.
Теперь мы инициализируем таймер обратного отсчета путем добавления этих строк в „script.js“ файл (внутри „JS“ папки):
$(document).ready(function(){ /* ---- Countdown timer ---- */ $('#counter').countdown({ timestamp : (new Date()).getTime() + 51*24*60*60*1000 }); }); Теперь наш счетчик показывает, сколько осталось времени (51 день начиная с настоящего момета). Он выглядит так:
7. Форма подписки
Для формы подписки мы будем использовать 2 новых HTML5-атрибута,о которых мы говорили ранее. Это “placeholder” и “required”. Вот HTML-код нашей формы:
<form action="" method="get"> <input type="text" placeholder="Input your e-mail address here..." required /> <input type="submit" value="Let me Notified" /> </form> У нас есть текстовое поле и кнопка для отправки формы. В текстовом поле пользователь обязательно должен ввести адрес электронной почты перед отправкой формы. Если оно будет незаполненым, появится текст „Введите ваш адрес электронной почты здесь ...“. \
Давайте немного украсим нашу форму:
/* ---- Subscription Form ---- */ form { position: relative; margin: 40px auto 0 auto; } .email { width: 498px; height: 35px; padding: 0 15px; background: #f1f1f1; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.02)), to(rgba(0,0,0,.02))); background-image: -webkit-linear-gradient(top, rgba(255,255,255,.02), rgba(0,0,0,.02)); background-image: -moz-linear-gradient(top, rgba(255,255,255,.02), rgba(0,0,0,.02)); background-image: -ms-linear-gradient(top, rgba(255,255,255,.02), rgba(0,0,0,.02)); background-image: -o-linear-gradient(top, rgba(255,255,255,.02), rgba(0,0,0,.02)); background-image: linear-gradient(top, rgba(255,255,255,.02), rgba(0,0,0,.02)); border: 1px solid #cbcbcb; -moz-box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset; -webkit-box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset; box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #b3b2b2; font-style: italic; } .email:focus { outline: 0; border: 1px solid #c0c0c0; -moz-box-shadow: 0 2px 3px 0 rgba(0,0,0,.2) inset; -webkit-box-shadow: 0 2px 3px 0 rgba(0,0,0,.2) inset; box-shadow: 0 2px 3px 0 rgba(0,0,0,.2) inset; } .submit { width: 140px; height: 37px; margin: 0 0 0 5px; padding: 0; background: #888; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.1)), to(rgba(0,0,0,.1))); background-image: -webkit-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.1)); background-image: -moz-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.1)); background-image: -ms-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.1)); background-image: -o-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.1)); background-image: linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.1)); border: 1px solid #636363; -moz-box-shadow: 0 1px 2px 0 rgba(253,252,252,.35) inset, 0 -1px 2px 0 rgba(0,0,0,.15) inset; -webkit-box-shadow: 0 1px 2px 0 rgba(253,252,252,.35) inset, 0 -1px 2px 0 rgba(0,0,0,.15) inset; box-shadow: 0 1px 2px 0 rgba(253,252,252,.35) inset, 0 -1px 2px 0 rgba(0,0,0,.15) inset; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.35); line-height: 13px; cursor: pointer; } .submit:hover { background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(255,255,255,.1)), to(rgba(0,0,0,.1))); background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,.1), rgba(0,0,0,.1)); background-image: -moz-linear-gradient(bottom, rgba(255,255,255,.1), rgba(0,0,0,.1)); background-image: -ms-linear-gradient(bottom, rgba(255,255,255,.1), rgba(0,0,0,.1)); background-image: -o-linear-gradient(bottom, rgba(255,255,255,.1), rgba(0,0,0,.1)); background-image: linear-gradient(bottom, rgba(255,255,255,.1), rgba(0,0,0,.1)); -moz-box-shadow: 0 1px 2px 0 rgba(0,0,0,.15) inset; -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,.15) inset; box-shadow: 0 1px 2px 0 rgba(0,0,0,.15) inset; } .submit:active { -moz-box-shadow: 0 1px 2px 0 rgba(0,0,0,.15) inset, 0 3px 13px 3px rgba(0,0,0,.3) inset; -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,.15) inset, 0 3px 13px 3px rgba(0,0,0,.3) inset; box-shadow: 0 1px 2px 0 rgba(0,0,0,.15) inset, 0 3px 13px 3px rgba(0,0,0,.3) inset; color: #ddd; } Как видите, мы использовали псевдо-классы :hover, :focus и :active и те же CSS3-свойства для нашего счетчика, “border-radius”, “box-shadow”, “linear-gradient” и “text-shadow”.
Так будет выглядеть наша форма, если поле будет незаполнено:
Два новых атрибутов HTML5 (placeholder” и “required”) очень полезны и могут сэкономить много времени, но они не поддерживаются старыми браузерами, такими как Internet Explorer 7 и 8. Мы решим эту проблему при помощи библиотеки Modernizr.
Safari также не поддерживает атрибут „required“ , но Modernizr возвращает „true“ при проверке
.После подключения Modernizr (файл „modernizr.custom.js“) в „head“ , мы должны добавить эти строки в „script.js“ файл:
/* ---- Using Modernizr to check if the "required" and "placeholder" attributes are supported ---- */ if (!Modernizr.input.placeholder) { $('.email').val('Input your e-mail address here...'); $('.email').focus(function() { if($(this).val() == 'Input your e-mail address here...') { $(this).val(''); } }); } // for detecting if the browser is Safari var browser = navigator.userAgent.toLowerCase(); if(!Modernizr.input.required || (browser.indexOf("safari") != -1 && browser.indexOf("chrome") == -1)) { $('form').submit(function() { $('.popup').remove(); if(!$('.email').val() || $('.email').val() == 'Input your e-mail address here...') { $('form').append('<p>Please fill out this field.</p>'); $('.email').focus(); return false; } }); $('.email').keydown(function() { $('.popup').remove(); }); $('.email').blur(function() { $('.popup').remove(); }); } Вот CSS-код для всплывающего окна и поля под текстовым полем:
.popup { position: absolute; top: 45px; left: 0; width: 140px; padding: 10px; background: #e7e7e7; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 0 2px 2px 0 rgba(0,0,0,.1); -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.1); box-shadow: 0 2px 2px 0 rgba(0,0,0,.1); font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #888; } Теперь, если вы открыли Safari и нажали кнопку „submit“ и не ввели текст, наша форма будет выглядеть так:
8. Футер
В футер мы добавим социальные иконки с прикрепленными к ним ссылками.
Вот разметка футера:
<footer> <ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </footer> И CSS:
/* ---- Footer ---- */ footer { width: 700px; margin: 0 auto; padding: 35px 0 25px 0; overflow: hidden; } footer ul { float: right; width: 125px; height: 22px; } footer ul li { float: left; } footer a { position: relative; display: block; margin-left: 10px; } .digg { width: 10px; height: 16px; background: url(../images/digg.png) center center no-repeat; } .twitter { width: 21px; height: 16px; background: url(../images/twitter.png) center center no-repeat; } .vimeo { width: 16px; height: 16px; background: url(../images/vimeo.png) center center no-repeat; } .skype { width: 16px; height: 16px; background: url(../images/skype.png) center center no-repeat; } Мы также добавим стрелку, чтобы наша страница выглядела профессионально. Для этого нам понадобится пустой див:
<div></div> А также добавим следующие стили:
.social-media-arrow { position: absolute; top: 125px; right: -95px; width: 108px; height: 256px; background: url(../images/social-media-arrow.png) top left no-repeat; } Наша страница должна выглядеть так:
9. Немного jQuery-анимации
Теперь давайте немного анимируем социальные иконки и ссылки, когда пользователь наводит на них мышкой. Для этого добавим несколько строчек в файл “script.js” :
/* ---- Animations ---- */ $('#links a').hover( function(){ $(this).animate({ left: 3 }, 'fast'); }, function(){ $(this).animate({ left: 0 }, 'fast'); } ); $('footer a').hover( function(){ $(this).animate({ top: 3 }, 'fast'); }, function(){ $(this).animate({ top: 0 }, 'fast'); } ) 10. Добавляем стили для Internet Explorer 7 – 8
Добавьте следующие стили в файл “ie.css” :
.email { line-height: 35px; } Мы добавили эти стили потому, что в IE 7 и 8 текстовое поле не отражает текст центрированым по вертикали.
Заключение
Наконец мы создали страницу-»заглушку" и готовы использовать ее на нашем сайте. Мы использовали некоторые новые свойства CSS3 и несколько новых тегов HTML5 и атрибуты, которые спасли нам много времени и сделали нашу страницы быстрой и легкой.
Итак, что вы думаете по поводу этого урока? Узнали ли вы что-то новое? Кроме того, что вы думаете об этих новых свойств? Будете ли вы использовать их? Или вы хотите, чтобы ждать, пока они лучше поддерживаются различными браузерами?
Примечание: Исходники вы можете скачать на сайте автора
Автор: 1stwebdesigner
Перевод: Дежурка
www.dejurka.ru
Нестандартные кнопки социальных сетей для сайта – таких не встретишь ни где
Добрый день дорогие друзья! Сегодня у меня небольшой пост, в котором я хочу рассказать вам о пока ещё не запятнанных кнопках социальных сетей для сайта. На эту тему в сети написано уже тоны контента и я не хочу быть ещё одним рерайтером, потому что все эти статьи рассказывают об одних и тех же сервисах яндекса. Поэтому мы сейчас и видим, что на всех блогах стоят одинаковые кнопки и из-за этой пустяковины блоги теряют свою уникальность перед читателями. Когда я вижу любую мелочь будь эта форма подписки, соц. кнопки или шаблон, то ценность блога сразу падаем в моих глазах. И в ваших я думаю тоже.
Блогосфера растет и если сейчас делать блог с нуля, то статьями на тему с обзорами классических плагинов, сервисов, установкой denwera, регистрацией в хостинге – никого не удивишь, а если вы и собрались писать статью на популярную тему, то информация должна быть исключительно эксклюзивная, но молодому блоггеру навряд ли это под силу.
Я сам стараюсь не быть похожим на других и время от времени меняю элементы дизайна, последний раз сменил форму подписки и соц. кнопки пол года назад. Все очень элегантно вписалось в дизайн так, что хочется строчить и строчить на такой блог=)Ещё пол года назад появился новый сервис кнопок социальных сетей, он какой-то буржуйный кстати и я быстренько себе их установил. Честно сказать я предполагал, что в течение полугода такие кнопки будут стоять уже на всех блога, но время идет и подобные элементы я вижу лишь у единиц, более того очень мало статей имеется с обзором этого сервиса, поэтому пришло время вам о нем рассказать.
Вот вам ссылка на сервис. Выбор кнопок прост как три копейки.
Сперва нужно определиться со скином:
- Классический
- Плоский
- Бирман
Какие вам нужны социальные сети укажите сами, что касается скина, то я лично использую классическую оболочку с четырьмя наиболее значимыми соц. сетями. Сейчас в интернете можно встретить много статей на тему того, что кнопки социальных сетей для сайта несут вред, но я лично не вижу в них ничего плохого и свои 50-100 посетителей в сутки я получаю именно с соц.сетей. Факт, то что для контентных проектов такие кнопки бесполезны, потому что мало кто хочет ретвитить или репостить безличные статейные сайты, а контентом с блогов люди с радостью делятся со своими друзьями. Вот как выглядят все три оболочки кнопок на сервисе:
Я лично мало где встречал такие кнопки, поэтому можете смело устанавливать их себе на блог. Кстати, что касается установки, то я забыл вам о ней рассказать=)
Как только вы настроили подходящий вид кнопок внизу страницы жмите желтую кнопку «скачать». Вот как она выглядит:
Это будет архив содержащий в себе несколько файлов:
- CSS стиль
- Небольшой скрипт .js
- Html код
Пока писал статью, понял, почему у многих нет таких кнопок, а все потому, что инструкция по установке на английском языке, поэтому чтоб вы не парились, я написал небольшой мануал по установке соц. кнопок.
Шаг 1. – Файлы стилей и скриптом забрасываем в папку с вашей темой wordpress.
- social-likes_classic.css
- social-likes.min.js
Шаг 2. – Открываем файл header.php и между тегом <head></head> вставляем следующий код:
| 1 2 | <meta name="generator" content="Social Likes: http://sapegin.github.com/social-likes/"> <link rel="stylesheet" href="social-likes_classic.css"> |
<meta name="generator" content="Social Likes: http://sapegin.github.com/social-likes/"> <link rel="stylesheet" href="social-likes_classic.css">
Говоря простым языком мы подключили CSS стиль и графику кнопок, которая будет грузиться с сервера github.com, тем самым уменьшили количество запросов к базе данных.
Далее выбираем место где вы хотите установить кнопки и вставляете следующий код:| 1 2 3 4 5 6 7 8 9 | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="social-likes.min.js"></script> <div> <div title="Поделиться ссылкой на Фейсбуке">Facebook</div> <div data-via="antonkramorov" title="Поделиться ссылкой в Твиттере">Twitter</div> <div title="Поделиться ссылкой во Вконтакте">Вконтакте</div> <div title="Поделиться ссылкой в Гугл-плюсе">Google+</div> </div> |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="social-likes.min.js"></script> <div> <div title="Поделиться ссылкой на Фейсбуке">Facebook</div> <div data-via="antonkramorov" title="Поделиться ссылкой в Твиттере">Twitter</div> <div title="Поделиться ссылкой во Вконтакте">Вконтакте</div> <div title="Поделиться ссылкой в Гугл-плюсе">Google+</div> </div>
Затем сохраняете и обновляете страницу. Кнопки должны отобразиться. На этом у меня все, если у вас есть какие-нибудь вопросы по установке кнопок прошу писать в комментариях. Помогу установить кнопки корректно. Подписывайтесь на обновления блога, жду вас в следующих статьях.
jonyit.ru
Социальные кнопки на HTML / CSS3
Социальные кнопки на HTML / CSS
Это довольно часто встречающий атрибут на каждом сайт, сейчас не возможно представить хоть один сайт без социальных кнопок. В данном уроке создадим красивые кнопки на CSS, зафиксируем их на странице, а при наведении, будем анимированть плавным появлением с количеством просмотров. По нажатию на иконку пользователь будет переходить на социальную сеть.
See the Pen EbdgoN by Denis (@Dwstroy) on CodePen.
Разметка социальной панели в HTML
Первым делом создадим каркас социальной панели. Чтобы не писать html разметку с нуля я его скопировал с предыдущего урока «Как создать форму в CSS3», в уроке я показывал, как подключать иконки на страничке и красиво оформить.
Скачайте архив с урока на компьютер и разархивируйте. В папке найдете стили и шрифты иконок, которые подключали в предыдущем видео с данного ресурса fontawesome.io.
В папке img расположена картинка на задний фон, в css папке файл style.css в которой подключили картинку, font-awesome.css содержит стили иконок, в папке fonts их шрифты, а в index.html это все подключено, остается только описать саму разметку.
Я переносу все файлы в IDE редактор PhpStorm в котором буду описывать код, а вы можете их редактировать прям через блокнот.
Открываем файл index.html, в head описано подключение стилей и иконок, тут я думаю все предельно понятно. Между тегами body открываем <div> с классом социал .social, который будет являться нашей оберткой кнопок.
В нутрии создадим, блок <div> с классом .dws-button, второй класс пропишем начальный суффикс dws-, этот блок продублируем шесть раз, в нем разместим ссылку с атрибутом target=_blank чтобы она открывалась в новой вкладке, затем в ней идет блок div с классом dws-share, в нем делаем список для иконки с классом .fa и приставкой второго класса fa- с атрибутом aria-hidden=true за ним добавляем блок с классом .dws-text, жмем создать (кнопка TAB) получили html каркас под иконки, которые далее оформим при помощи стилей.
div.dws-button.dws-*6>a[target=_blank]>div.dws-share>i.fa.fa-[aria-hidden=true]^div.dws-textЗатем отберем иконки, которые задействуем под социальную панель. Переходим на сайт fontawesome.io/icons и выписываем название иконок, которые будем использовать.
- vk
- youtube
- odnoklassniki
- envelope-o
Вставляем ссылки и прописываем количество подписчиков.
<div> <div><a href="https://www.facebook.com/DWstroy-1415456785391372/" target="_blank"> <div><i aria-hidden="true"></i></div> <div>51</div> </a></div> <div><a href="https://vk.com/dwstroy" target="_blank"> <div><i aria-hidden="true"></i></div> <div>730</div> </a></div> <div><a href="#"> <div><i aria-hidden="true"></i></div> <div></div> </a></div> <div><a href="https://www.youtube.com/channel/UCTgx8cZRD5Jz2_zGaT27S3w" target="_blank"> <div><i aria-hidden="true"></i></div> <div>1299</div> </a></div> <div><a href="#"> <div><i aria-hidden="true"></i></div> <div></div> </a></div> <div><a href="mailto:[email protected]"> <div><i aria-hidden="true"></i></div> <div></div> </a></div> </div>Затем приступим к оформлению стилей.
Открываем style.css, от позиционируем блок .social.
.social{ position: fixed; top: 200px; left: 0; z-index: 1000; }Затем предадим кнопке внешний вид, указываем высоту и ширину, сделаем небольшие отступы. Зададим уменьшение ширины блока кнопки до 40 пик и скроем все, что вылезает за ее пределы при помощи overflow:hidden;. Придаем кнопке анимацию при помощи transition: all 0.5s; и прижимаем ее к левому краю меняя параметр у класса .social left=0.
.dws-button{ background-color: #3b5998; width: 40px; height: 25px; padding: 5px; overflow:hidden; transition: all 0.5s; }Пропишем иконкам, и тексту которые обернутые в ссылки белый цвет, убираем подчеркивание.
a{ color: #fff; text-decoration:none; }Увеличим иконки на 25 пик. и от центруем их по середине. Чтобы они встали по центру, напишем что это блочный элемент.
a i.fa { font-size: 25px; text-align: center; display: block; }Сделаем обтекание у иконок при помощи float:left и укажем ширину в 40 пик.
.dws-share{ float: left; width: 40px; }Текст прижмем к правой стороне, увеличим его на 20 пик. и отпозиционируем его по центру строки.
.dws-text{ float: right; font-size: 20px; position: relative; top: 2px; right: 5px; }Затем предлагаю каждой кнопки задать соответствующий цвет.
.dws-facebook {background-color: #3b5998;} .dws-vk {background-color: #507299;} .dws-twitter {background-color: #33bdf1;} .dws-youtube {background-color: #e62117;} .dws-odnoklassniki {background-color: #ee8208;} .dws-envelope-o {background-color: #656766;}
Пропишем параметры при наведении. Первое будем менять цвет кнопки на черный, увеличим ее ширину до 50 пик., а саму иконку немного сдвинем левей на 15 пик.
.dws-button:hover{ background-color: #000; width: 50px; padding-left: 15px; }Получилось следующее. Добавим при наведении для блоков с текстом ширину.
.dws-facebook:hover{width:75px;} .dws-vk:hover,.dws-youtube:hover{width:95px;}
Вот такие анимированные иконки получились у нас с вами. Вы можете на базе данного кода вставлять свои иконки, добавлять ссылки к ним, внедрять все это к себе на сайт. Ведь функционал до безобразия простой и довольно эффектно смотрится.
Кому понравилось видео, обязательно поделись им в социальных сетях.
Оставить комментарий:
dwstroy.ru
html - При использовании float: left один из боков сползает вниз
body { background:url(http://www.pixeden.com/media/k2/galleries/165/002-subtle-light-pattern-background-texture-vol5.jpg) repeat; } .wrap { background: #333; width: 1000px; margin: auto; } .clear { clear: both; } header { background: #000; } .logo { margin-left: 19px; margin-top: 30px; margin-bottom: 19px; width: 366px; height: 59px; float: left; } .some_text_in_header { width: 404px; height: 40px; margin-right: 19px; margin-top: 39px; margin-bottom: 29px; color: #595959; text-align: right; float: right; font-family: Georgia; font-size: 17px; font-weight: 400; line-height: 22px; } .top_menu { background-color: #282828; width: 960px; height: 46px; margin: auto; text-align: center; border-radius: 10px 10px 0 0; } .top_menu ul li { display: inline-block; margin-top: 19px; margin-right: 31px; } .top_menu ul li a { color: #ccc; font-family: Georgia; text-decoration: none; text-transform: uppercase; } .top_menu ul li a:hover { color: yellow; } main { background-color: #282828; border-top: 1px solid #3d3d3d; border-bottom: 1px solid #3d3d3d; } .some_content { float: left; width: 680px; height: 358px; background-color: #171717; margin: 26px 0px 0px 20px; } .some_content_block { display: block; float: left; width: 280px; height: 113px; margin: 31px 27px 39px 31px; } .some_content_block img, h4, p { display: inline-block; } .some_content_block h4 { color: #4a4a4a; font-family: Georgia; font-size: 22px; font-weight: 400; line-height: 26px; } .some_content_block p { color: #999; font-family: Georgia; font-size: 12px; font-weight: 400; line-height: 14px; } .first_some_img_block { float: left; width: 680px; height: 150px; margin: 22px 0px 26px 20px; line-height:0 } .first_some_img_block img { border:solid 10px #171717; display: block; float: left; margin-right: 10px; } .first_some_img_block img:last-child { margin-right: 0px; } .second_some_img_blok { background: #aaa; margin-top: 26px; float: right; width: 260px; height: 530px; } .second_some_img_blok_big_pic { display: block; float: left; } .second_some_img_blok_small_pic { display: block; float: left; } <!DOCTYPE html> <html> <head> <title>WEB TEAM template</title> <link rel="stylesheet" href="./reset.css"> <link rel="stylesheet" href="./style.css"> </head> <body> <!-- wrap begin --> <div> <!-- HEADER THERE --> <header> <div> <div> <a href="#"><img src="http://cdn.shopify.com/s/files/1/0307/4837/t/2/assets/logo.png" alt="logo"></a> </div> <div> <p> Nullanibh quis sed in auctor sit aenean vivamus hendrerit purus nequam. Pulvinarat ligula sed eger. </p> </div> <div></div> </div> <nav> <ul> <li><a href="#">homepage</a></li> <li><a href="#">style demo</a></li> <li><a href="#">full width</a></li> <li><a href="#">dropdown</a></li> <li><a href="#">link text</a></li> </ul> </nav> </header> <!--MAIN CONTENT THERE --> <main> <div> <div> <img src="http://getnack.com/wp-content/themes/pursuit/assets/images/nackpaymentleft_righttoppic.png" alt=""> <h4>lorum ipsum dolor</h4> <p>Orciinterdum condimenterdum nullamcorper elit nam curabitur laoreet met praesenean et iac ulum. Metridiculis conseque quis iaculum aen ean nunc aenean quis nam nis dui.</p> </div> <div> <img src="http://getnack.com/wp-content/themes/pursuit/assets/images/nackpaymentleft_righttoppic.png" alt=""> <h4>lorum ipsum dolor</h4> <p>Orciinterdum condimenterdum nullamcorper elit nam curabitur laoreet met praesenean et iac ulum. Metridiculis conseque quis iaculum aen ean nunc aenean quis nam nis dui.</p> </div> <div> <img src="http://getnack.com/wp-content/themes/pursuit/assets/images/nackpaymentleft_righttoppic.png" alt=""> <h4>lorum ipsum dolor</h4> <p>Orciinterdum condimenterdum nullamcorper elit nam curabitur laoreet met praesenean et iac ulum. Metridiculis conseque quis iaculum aen ean nunc aenean quis nam nis dui.</p> </div> <div> <img src="http://getnack.com/wp-content/themes/pursuit/assets/images/nackpaymentleft_righttoppic.png" alt=""> <h4>lorum ipsum dolor</h4> <p>Orciinterdum condimenterdum nullamcorper elit nam curabitur laoreet met praesenean et iac ulum. Metridiculis conseque quis iaculum aen ean nunc aenean quis nam nis dui.</p> </div> </div> <div> <img src="http://mmo-shop.ru/uploads/blocks/origin-accounts-200x130.png" alt=""> <img src="http://mmo-shop.ru/uploads/blocks/origin-accounts-200x130.png" alt=""> <img src="http://mmo-shop.ru/uploads/blocks/origin-accounts-200x130.png" alt=""> </div> <div> <img src="http://orig11.deviantart.net/1b04/f/2012/278/0/4/random_bg_by_pagodapeak-d5gwipc.png" alt=""> <img src="http://isandroid.ru/uploads/posts/2014-08/1406899988__jpg_converted.jpg" alt=""> <img src="http://isandroid.ru/uploads/posts/2014-08/1406899988__jpg_converted.jpg" alt=""> <img src="http://isandroid.ru/uploads/posts/2014-08/1406899988__jpg_converted.jpg" alt=""> <img src="http://isandroid.ru/uploads/posts/2014-08/1406899988__jpg_converted.jpg" alt=""> </div> <div></div> </main> <!-- FOOTER THERE --> <footer> <div> <a href="#"></a> <a href="#">want go the top?</a> </div> <div> <form action=""></form> <label for="usr_name">Name:</label> <input name="usr_name" type="text"> <label for="usr_email">Email:</label> <input name="usr_email" type="text"> <label for="usr_message">Message:</label> <textarea name="usr_massage" form="usr_feedback"></textarea> <button type="button" name="usr_feedback_submit">Submit</button> <button type="button" name="usr_feedback_reset">Reset</button> </div> <div> <h5>Latest From The Blog</h5> <hr> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> </div> <div> <h5>Keep in touch</h5> <hr> <div> <img src="https://dgryagaiw0chj.cloudfront.net/sites/all/themes/shared/jcore_oup/images/facebook.svg" alt="follow us on Facebook"> <a href="#">Facebook</a></div> <div> <img src="https://www.microsoft.com/en-xm/outlook-com/img/footer-icon-twitter.svg" alt="follow us on Twitter"> <a href="#">Twitter</a></div> <div> <img src="http://orig09.deviantart.net/316b/f/2013/190/d/7/deviantart_by_tanathe-d6co5mn.png" alt="see us on Deviant Art"> <a href="#">Deviant Art</a> </div> </div> <hr> <p>Copyright © 2013 Domain Name - All Rights Reserved</p> <p>Template by OS Templates</p> </footer> </div> <!-- end wrap --> </body> </html>ru.stackoverflow.com
Делаем страницу-заглушку при помощи HTML5 и CSS3
В этом уроке мы собираемся создать страницу-заглушку при помощи HTML5 и CSS3 в минималистском стиле и светлых тонах. В этом уроке мы будем также использовать некоторые новые теги HTML5 и некоторые интересные атрибуты, такие как «placeholder» и «required» для формы подписки. Атрибут «placeholder» позволяет нам показывать текст в поле ввода электронной почте, когда он пуст, в то время как атрибут «required» позволяет сделать, так чтобы пользователь не мог отправить форму без ввода данных. Мы также добавим JQuery-код этих двух атрибутов для старых браузеров и браузеров, которые пока их не поддерживают. Для таймера обратного отсчета мы будем использовать JQuery и jQuery countdown plugin от tutorialzine.com. Конечно, мы немного его настроим, чтобы соответствовать нашему дизайну.
Окончательный результат:
Смотреть демо
Как видите, страница содержит много градиентов и теней. Мы будем делать её, используя только CSS3. Как вы, наверняка знаете, CSS3 предоставляет нам много новых свойств, которые позволяют создавать интересные эффекты без необходимости использования изображений.
Так, хватит болтать и начнем.
1. Структура файла
Создайте папку и назовите “coming-soon-page”. Внутри этой папки будут следующие файлы и папки:
- index.html –основной HTML-документ;
- css— папка со стилями,
- style.css – основные стили,
- reset.css – файл для сброса стилей (meyerweb),
- ie.css – файл для Internet Explorer 7 и 8;
- js— папка с файлами JavaScript,
- jquery.countdown.js – плагин jQuery для обратного отсчета времени,
- script.js – наш JavaScript-файл для установки таймера, для анимации и некоторых атрибутов html5, которые не поддерживаются
- modernizr.custom.js – файл с шаблоном modernizr;
- images – папка для изображений;
- fonts – папка со шрифтами
2. Структура страницы
Ниже вы видите основную HTML-разметку страницы:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Minimal Coming Soon Page</title> <!-- CSS --> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="fonts/stylesheet.css"> <link rel="stylesheet" href="css/style.css"> <!--[if lt IE 9]> <link rel="stylesheet" href="css/ie.css"> <![endif]--> <!-- IE fix for HTML5 tags --> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!-- jQuery and Modernizr--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="js/modernizr.custom.js"></script> <!-- Countdown timer and other animations --> <script src="js/jquery.countdown.js"></script> <script src="js/script.js"></script> </head> <body> <header> <!-- The headline and description of our page --> </header> <div> <div> <!-- The main links, support, download, etc. --> </div> <div> <!-- The countdown timer --> </div> <form action="" method="get"> <!-- The subscription form --> </form> <div> <!-- The social media arrow, on the right of the page --> </div> <footer> <!-- The page's footer that will contain the social icons --> </footer> </div> </body> </html>
Как видите, код HTML очень прост. В теге «head» мы прикрепили все стили и JavaScript-файлы, которые нам нужны.
Также мы добавили условные комментарии для файла «ie.css». В этом файле мы добавим несколько строк для IE 7-8. Мы также прикрепили файл «html5.js» для того, чтобы заставить IE 7 и 8 понимать новые теги HTML5, “header” и “footer”.
Тело нашей страницы содержит хедер, в который мы поместим заголовок и описание страницы, и див «main», в который мы поместим ссылки, таймер обратного отсчета, форму подписки и футер.
Вот стили для тела страницы. Мы будем использовать в основном шрифт Arial (за исключением таймера) и повторяющийся паттерн для фона:
body { background: url(../images/body-pattern.jpg) top left repeat; font-family: Arial, Helvetica, sans-serif; padding-bottom: 40px; }3. Хедер
Как было сказано выше, наш хедер будет содержать заголовок и описание. Вот разметка HTML:
<header> <h2>We are working our butts off to finish this website</h2> <p>Our developer, Michael, is doing his best to finish this website before the counter, but we can’t help him.</p> </header>А вот и стили:
/* ---- Header ---- */ header { width: 720px; margin: 80px auto 0 auto; } header h2 { font-size: 30px; font-weight: bold; color: #272727; text-shadow: 0 1px 0 #fff; } header p { margin: 20px 0 0 3px; font-size: 14px; color: #272727; }Теперь наша страница выглядит следующим образом:
4. Основная область
Основная область будет содержать ссылки, таймер, форму подписки, футер и социальные иконки.Вот ее стили:
/* ---- Main Area ---- */ #main { position: relative; width: 700px; margin: 50px auto 0 auto; padding: 20px 0 0 25px; background: url(../images/main-content-pattern.jpg) top left repeat; }Она имеет ширину 700 пикселей и повторяющийся рисунок с сеткой в качестве фона и у нее относительное позиционирование.
5. Ссылки
Ниже вы можете увидеть HTML-разметку для ссылок:
<div> <div><a href="">http://1stwebdesigner.com/</a></div> <div><a href="">http://support.1wd.com/</a></div> <div><a href="">Google Chrome OS. 10.X.23</a></div> <div><a href="">http://1wd.co/e-books/</a></div> <div><a href="">http://1wd.com/download/</a></div> <div><a href="">UPS Signed Worldwide</a></div> </div>И CSS:
/* ---- Links ---- */ #links { width: 700px; font-size: 12px; font-weight: bold; color: #aaa; line-height: 18px; overflow: hidden; } #links a { position: relative; color: #aaa; text-decoration: none; } #links a:hover { color: #aaa; text-decoration: none; } .home, .support, .browser, .books, .download, .ups { float: left; width: 180px; margin-left: 42px; padding-left: 25px; } .home { background: url(../images/home.png) left center no-repeat; margin-left: 0; } .support { background: url(../images/support.png) left center no-repeat; } .browser { background: url(../images/browser.png) left center no-repeat; clear: right; } .books, .download, .ups { margin-top: 10px; } .books { background: url(../images/books.png) left center no-repeat; margin-left: 0; } .download { background: url(../images/download.png) left center no-repeat; } .ups { background: url(../images/ups.png) left center no-repeat; clear: right; }Область ссылок имеет ширину 700 пикселей, а у каждой ссылки есть своя собственная иконка. Мы немного поиграли с отступами, чтобы сделать так, чтобы они соответствовали дизайну. А еще мы используем относительное позиционирование для ссылкок, чтобы позже можно было добавить простую анимацию к ним при помощи JQuery.
Страница должна выглядеть следующим образом:
6. Таймер обратного отсчета
Для создания таймера обратного отсчета мы будем использовать jQuery countdown plugin от tutorialzine.com. Наш таймер включает в себя див “counter”. Вот его HTML-код:
Див “counter” будет пустым, потому что весь HTML-код будет генерироваться плагином jQuery. Вот HTML-код, который генерирует плагин:
<div> <div> <span> <span>0</span> </span> <span> <span>0</span> </span> <span> <span>DAYS</span> </span> </div> <span>:</span> <span></span> <div> <span> <span>0</span> </span> <span> <span>0</span> </span> <span> <span>HRS</span> </span> </div> <span>:</span> <span></span> <div> <span> <span>0</span> </span> <span> <span>0</span> </span> <span> <span>MNTS</span> </span> </div> <span>:</span> <span></span> <div> <span> <span>0</span> </span> <span> <span>0</span> </span> <span> <span>SECS</span> </span> </div> </div>В зависимости от времени, которые мы ставим при инициализации счетчика, плагин будет показывать четыре колонки цифр («Дни», «часы», «минуты», «секунды») и анимировать таймер.
Примечание: Мы не будем объяснять плагин более подробно. Мартин Ангелов (Martin Angelov), создатель этого плагина очень подробно объясняет это на tutorialzine.
Теперь давайте добавим стили нашему счетчику:
/* ---- Counter ---- */ #counter { width: 700px; height: 145px; margin: 55px auto 0 auto; font-family: 'LeagueGothicRegular', Arial, Helvetica, sans-serif; font-size: 92px; color: #272727; text-shadow: 0 1px 0 #fff; overflow: hidden; } .countDays, .countHours, .countMinutes, .countSeconds { float: left; width: 102px; height: 138px; padding-left: 36px; background: #e7e7e7; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.1)), to(rgba(0,0,0,.07))); background-image: -webkit-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.07)); background-image: -moz-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.07)); background-image: -ms-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.07)); background-image: -o-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.07)); background-image: linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.07)); border: 1px solid #ccc; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 0 2px 3px 0 rgba(255,255,255,.2) inset, 0 2px 2px 0 rgba(0,0,0,.1); -webkit-box-shadow: 0 2px 3px 0 rgba(255,255,255,.2) inset, 0 2px 2px 0 rgba(0,0,0,.1); box-shadow: 0 2px 3px 0 rgba(255,255,255,.2) inset, 0 2px 2px 0 rgba(0,0,0,.1); } .points { float: left; width: 40px; margin: 0; font-family: Georgia, serif; font-size: 44px; font-weight: bold; text-align: center; line-height: 138px; text-shadow: none; } .position { position: relative; float: left; width: 35px; height: 92px; margin: 8px 0 0 0; } .digit { position: absolute; top: 0; left: 0; } .boxName { float: left; width: 80px; margin: -5px 0 0 7px; font-size: 36px; color: #a6a6a6; text-shadow: 0 1px 0 rgba(255,255,255,.5); } .Hours { margin-left: 5px; } .Seconds { margin-left: 2px; }Мы выбрали шрифт «League Gothic" .
Как видите, мы использовали только CSS3-свойства для создания теней и градиентов. Эти новые свойства позволяет создавать сложные проекты без необходимости нарезки изображений.
CSS3 свойства, которые используемые здесь: «border-radius”, “box-shadow”, “linear-gradient” и “text-shadow”.
Мы также использовали атрибут „RGBA“ , потому что он позволяет присвоить прозрачного цвета с различными свойствами CSS.
Теперь мы инициализируем таймер обратного отсчета путем добавления этих строк в „script.js“ файл (внутри „JS“ папки):
$(document).ready(function(){ /* ---- Countdown timer ---- */ $('#counter').countdown({ timestamp : (new Date()).getTime() + 51*24*60*60*1000 }); });Теперь наш счетчик показывает, сколько осталось времени (51 день начиная с настоящего момета). Он выглядит так:
7. Форма подписки
Для формы подписки мы будем использовать 2 новых HTML5-атрибута,о которых мы говорили ранее. Это “placeholder” и “required”. Вот HTML-код нашей формы:
<form action="" method="get"> <input type="text" placeholder="Input your e-mail address here..." required /> <input type="submit" value="Let me Notified" /> </form>У нас есть текстовое поле и кнопка для отправки формы. В текстовом поле пользователь обязательно должен ввести адрес электронной почты перед отправкой формы. Если оно будет незаполненым, появится текст „Введите ваш адрес электронной почты здесь ...“. \
Давайте немного украсим нашу форму:
/* ---- Subscription Form ---- */ form { position: relative; margin: 40px auto 0 auto; } .email { width: 498px; height: 35px; padding: 0 15px; background: #f1f1f1; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.02)), to(rgba(0,0,0,.02))); background-image: -webkit-linear-gradient(top, rgba(255,255,255,.02), rgba(0,0,0,.02)); background-image: -moz-linear-gradient(top, rgba(255,255,255,.02), rgba(0,0,0,.02)); background-image: -ms-linear-gradient(top, rgba(255,255,255,.02), rgba(0,0,0,.02)); background-image: -o-linear-gradient(top, rgba(255,255,255,.02), rgba(0,0,0,.02)); background-image: linear-gradient(top, rgba(255,255,255,.02), rgba(0,0,0,.02)); border: 1px solid #cbcbcb; -moz-box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset; -webkit-box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset; box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #b3b2b2; font-style: italic; } .email:focus { outline: 0; border: 1px solid #c0c0c0; -moz-box-shadow: 0 2px 3px 0 rgba(0,0,0,.2) inset; -webkit-box-shadow: 0 2px 3px 0 rgba(0,0,0,.2) inset; box-shadow: 0 2px 3px 0 rgba(0,0,0,.2) inset; } .submit { width: 140px; height: 37px; margin: 0 0 0 5px; padding: 0; background: #888; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.1)), to(rgba(0,0,0,.1))); background-image: -webkit-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.1)); background-image: -moz-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.1)); background-image: -ms-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.1)); background-image: -o-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.1)); background-image: linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.1)); border: 1px solid #636363; -moz-box-shadow: 0 1px 2px 0 rgba(253,252,252,.35) inset, 0 -1px 2px 0 rgba(0,0,0,.15) inset; -webkit-box-shadow: 0 1px 2px 0 rgba(253,252,252,.35) inset, 0 -1px 2px 0 rgba(0,0,0,.15) inset; box-shadow: 0 1px 2px 0 rgba(253,252,252,.35) inset, 0 -1px 2px 0 rgba(0,0,0,.15) inset; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.35); line-height: 13px; cursor: pointer; } .submit:hover { background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(255,255,255,.1)), to(rgba(0,0,0,.1))); background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,.1), rgba(0,0,0,.1)); background-image: -moz-linear-gradient(bottom, rgba(255,255,255,.1), rgba(0,0,0,.1)); background-image: -ms-linear-gradient(bottom, rgba(255,255,255,.1), rgba(0,0,0,.1)); background-image: -o-linear-gradient(bottom, rgba(255,255,255,.1), rgba(0,0,0,.1)); background-image: linear-gradient(bottom, rgba(255,255,255,.1), rgba(0,0,0,.1)); -moz-box-shadow: 0 1px 2px 0 rgba(0,0,0,.15) inset; -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,.15) inset; box-shadow: 0 1px 2px 0 rgba(0,0,0,.15) inset; } .submit:active { -moz-box-shadow: 0 1px 2px 0 rgba(0,0,0,.15) inset, 0 3px 13px 3px rgba(0,0,0,.3) inset; -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,.15) inset, 0 3px 13px 3px rgba(0,0,0,.3) inset; box-shadow: 0 1px 2px 0 rgba(0,0,0,.15) inset, 0 3px 13px 3px rgba(0,0,0,.3) inset; color: #ddd; }Как видите, мы использовали псевдо-классы :hover, :focus и :active и те же CSS3-свойства для нашего счетчика, “border-radius”, “box-shadow”, “linear-gradient” и “text-shadow”.
Так будет выглядеть наша форма, если поле будет незаполнено:
Два новых атрибутов HTML5 (placeholder” и “required”) очень полезны и могут сэкономить много времени, но они не поддерживаются старыми браузерами, такими как Internet Explorer 7 и 8. Мы решим эту проблему при помощи библиотеки Modernizr.
Safari также не поддерживает атрибут „required“ , но Modernizr возвращает „true“ при проверке
.После подключения Modernizr (файл „modernizr.custom.js“) в „head“ , мы должны добавить эти строки в „script.js“ файл:
/* ---- Using Modernizr to check if the "required" and "placeholder" attributes are supported ---- */ if (!Modernizr.input.placeholder) { $('.email').val('Input your e-mail address here...'); $('.email').focus(function() { if($(this).val() == 'Input your e-mail address here...') { $(this).val(''); } }); } // for detecting if the browser is Safari var browser = navigator.userAgent.toLowerCase(); if(!Modernizr.input.required || (browser.indexOf("safari") != -1 && browser.indexOf("chrome") == -1)) { $('form').submit(function() { $('.popup').remove(); if(!$('.email').val() || $('.email').val() == 'Input your e-mail address here...') { $('form').append('<p>Please fill out this field.</p>'); $('.email').focus(); return false; } }); $('.email').keydown(function() { $('.popup').remove(); }); $('.email').blur(function() { $('.popup').remove(); }); }Вот CSS-код для всплывающего окна и поля под текстовым полем:
.popup { position: absolute; top: 45px; left: 0; width: 140px; padding: 10px; background: #e7e7e7; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 0 2px 2px 0 rgba(0,0,0,.1); -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.1); box-shadow: 0 2px 2px 0 rgba(0,0,0,.1); font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #888; }Теперь, если вы открыли Safari и нажали кнопку „submit“ и не ввели текст, наша форма будет выглядеть так:
8. Футер
В футер мы добавим социальные иконки с прикрепленными к ним ссылками.
Вот разметка футера:
<footer> <ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </footer>И CSS:
/* ---- Footer ---- */ footer { width: 700px; margin: 0 auto; padding: 35px 0 25px 0; overflow: hidden; } footer ul { float: right; width: 125px; height: 22px; } footer ul li { float: left; } footer a { position: relative; display: block; margin-left: 10px; } .digg { width: 10px; height: 16px; background: url(../images/digg.png) center center no-repeat; } .twitter { width: 21px; height: 16px; background: url(../images/twitter.png) center center no-repeat; } .vimeo { width: 16px; height: 16px; background: url(../images/vimeo.png) center center no-repeat; } .skype { width: 16px; height: 16px; background: url(../images/skype.png) center center no-repeat; }Мы также добавим стрелку, чтобы наша страница выглядела профессионально. Для этого нам понадобится пустой див:
<div></div>А также добавим следующие стили:
.social-media-arrow { position: absolute; top: 125px; right: -95px; width: 108px; height: 256px; background: url(../images/social-media-arrow.png) top left no-repeat; }Наша страница должна выглядеть так:
9. Немного jQuery-анимации
Теперь давайте немного анимируем социальные иконки и ссылки, когда пользователь наводит на них мышкой. Для этого добавим несколько строчек в файл “script.js” :
/* ---- Animations ---- */ $('#links a').hover( function(){ $(this).animate({ left: 3 }, 'fast'); }, function(){ $(this).animate({ left: 0 }, 'fast'); } ); $('footer a').hover( function(){ $(this).animate({ top: 3 }, 'fast'); }, function(){ $(this).animate({ top: 0 }, 'fast'); } )10. Добавляем стили для Internet Explorer 7 – 8
Добавьте следующие стили в файл “ie.css” :
.email { line-height: 35px; }Мы добавили эти стили потому, что в IE 7 и 8 текстовое поле не отражает текст центрированым по вертикали.
Заключение
Наконец мы создали страницу-»заглушку" и готовы использовать ее на нашем сайте. Мы использовали некоторые новые свойства CSS3 и несколько новых тегов HTML5 и атрибуты, которые спасли нам много времени и сделали нашу страницы быстрой и легкой.
Итак, что вы думаете по поводу этого урока? Узнали ли вы что-то новое? Кроме того, что вы думаете об этих новых свойств? Будете ли вы использовать их? Или вы хотите, чтобы ждать, пока они лучше поддерживаются различными браузерами?
Примечание: Исходники вы можете скачать на сайте автора
Автор: 1stwebdesigner
Перевод: Дежурка
www.dejurka.ru
